<template>
<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="150px">
		<el-form-item label="图像传感器代码：" prop="sensorCode">
				<el-input
				v-model="queryParams.sensorCode"
				placeholder="请输入图像传感器代码"
				clearable
				@keyup.enter.native="handleQuery"
				/>
		</el-form-item>
		<el-form-item label="传感器名称：" prop="sensorName" label-width="110px">
				<el-input
				v-model="queryParams.sensorName"
				placeholder="请输入传感器名称"
				clearable
				@keyup.enter.native="handleQuery"
				/>
		</el-form-item>
		<el-form-item style="margin-left: 20px;">
				<el-row>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				</el-row>

		</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
		<el-col :span="1.5">
				<el-button
				type="primary"
				plain
				icon="el-icon-plus"
				size="mini"
				@click="handleAdd"
				v-hasPermi="['produce:product-sensor:add']"
				>新增</el-button>
		</el-col>
		<el-col :span="1.5">
				<el-button
				type="success"
				plain
				icon="el-icon-edit"
				size="mini"
				:disabled="single"
				@click="handleUpdate"
				v-hasPermi="['produce:product-sensor:edit']"
				>修改</el-button>
		</el-col>
		<el-col :span="1.5">
				<el-button
				type="danger"
				plain
				icon="el-icon-delete"
				size="mini"
				:disabled="multiple"
				@click="handleDelete"
				v-hasPermi="['produce:product-sensor:removed']"
				>删除</el-button>
		</el-col>
		<el-col :span="1.5">
				<el-button
				type="warning"
				plain
				icon="el-icon-download"
				size="mini"
				@click="handleExport"
				v-hasPermi="['produce:product-sensor:export']"
				>导出</el-button>
		</el-col>
		<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="ProductSensorList" @selection-change="handleSelectionChange">
		<el-table-column type="selection" width="55" align="center" />
		<el-table-column label="图像传感器代码" align="center" prop="sensorCode" />
		<el-table-column label="传感器名称" align="center" prop="sensorName" />
		<el-table-column label="产品类型" align="center" prop="productType" />
		<el-table-column label="关联产品" align="center" prop="productInfos" >
				<template slot-scope="scope">
						<el-select placeholder="点击查询关联产品列表" style="width:100%;" v-model="scope.row.productInfos[0]" >
								<el-option v-if="scope.row.productInfos.length>0 && scope.row.productInfos[0] !== null" v-for="item in scope.row.productInfos" :key="item.productCode" :label="item.productCode + '-' +item.productName"
										:value="item.productCode" />
						</el-select>
				</template>
		</el-table-column>
		<el-table-column label="备注" align="center" prop="remark" />
		<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
				<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['produce:product-sensor:edit']"
				>修改</el-button>
				<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['produce:product-sensor:removed']"
				>删除</el-button>
				</template>
		</el-table-column>
		</el-table>
		
		<pagination
		v-show="total>0"
		:total="total"
		:page.sync="queryParams.pageNum"
		:limit.sync="queryParams.pageSize"
		@pagination="getList"
		/>

		<!-- 添加或修改产品传感器对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
		<el-form ref="form" :model="form" :rules="rules" label-width="140px">
				<el-form-item label="图像传感器代码" prop="sensorCode" >
				<el-input v-model="form.sensorCode" placeholder="请输入图像传感器代码" />
				</el-form-item>
				<el-form-item label="传感器名称" prop="sensorName">
				<el-input v-model="form.sensorName" placeholder="请输入传感器名称" />
				</el-form-item>
				<el-form-item label="产品类型" prop="productType">
						<el-select v-model="form.productType" placeholder="产品类型" @change="getProductInfoList(form.productType)" clearable filterable>
								<el-option v-for="item in productTypeOption" :key="item.code" :label="item.name"
										:value="item.code" />
						</el-select>
				</el-form-item>
				<el-form-item label="关联产品" prop="productCodes">
						<el-select v-model="form.productCodes" placeholder="关联产品" clearable filterable multiple style="width:100%" @change=foreceUpdate()>
								<el-option v-for="item in productInfoOption" :key="item.productCode" :label="item.productCode +'-'+ item.productName"
								:value="item.productCode" />
						</el-select>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
				<el-input v-model="form.remark" placeholder="请输入备注" />
				</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
		</div>
		</el-dialog>
</div>
</template>

<script>
import { listProductSensor, getProductSensor, removedProductSensor, addProductSensor, updateProductSensor } from "@/api/produce/product-sensor";
import { listProductType } from "@/api/produce/product-type";
import { listProductInfo } from "@/api/produce/product-info";

export default {
name: "Product-sensor",
data() {
		return {
		// 遮罩层
		loading: true,
		// 选中数组
		ids: [],
		// 非单个禁用
		single: true,
		// 非多个禁用
		multiple: true,
		// 显示搜索条件
		showSearch: true,
		// 总条数
		total: 0,
		// 产品传感器表格数据
		ProductSensorList: [],
		// 弹出层标题
		title: "",
		// 是否显示弹出层
		open: false,
		// 查询参数
		queryParams: {
				pageNum: 1,
				pageSize: 10,
				sensorCode: null,
				sensorName: null,
				removed: null,
        orderByColumn:'id',
        isAsc:'desc'
		},
		// 产品类型选项
		productTypeOption: [],
		// 产品选项
		productInfoOption: [],
		// 表单参数
		form: {},
		// 表单校验
		rules: {
				sensorCode: [
				{ required: true, message: "图像传感器代码不能为空", trigger: "blur" },
				{ required: true, message: "代码只能为数字加字母", trigger: "blur", pattern: /^[a-zA-Z0-9]+$/ }
				],
				sensorName: [
				{ required: true, message: "传感器名称不能为空", trigger: "blur" }
				],
		}
		};
},
created() {
		this.getList();
},
methods: {
		/** 多选强制刷新-渲染 */
		foreceUpdate(){
				this.$forceUpdate()
		},
		/**查询产品类型下拉 */
		getProductType () {
				// 产品类型查询
				let productTypeQueryParams = {
						pageNum: 1,
						pageSize: 100,
				};
				listProductType(productTypeQueryParams).then(response => {
						this.productTypeOption = response.rows;
						this.loading = false;
				});
		},
		/** 查询产品下拉*/
		getProductInfoList(val) {
				// 每次下拉都先清空
				this.form.productCodes = [];
				let qurey = {
						pageNum: 1,
						pageSize: 999,
						productCode: null,
						productName: null,
						productTypeCode: val,
						removed: null
				};
				listProductInfo(qurey).then(response => {
						this.productInfoOption = response.rows;
						this.loading = false;
				});
		},
		/** 查询产品传感器列表 */
		getList() {
				this.loading = true;
				listProductSensor(this.queryParams).then(response => {
						if(response.code === 200){
								this.ProductSensorList = response.rows;
								for(var i=0;i<this.ProductSensorList.length;i++){
										if(this.ProductSensorList[i].productInfos.length > 0 && this.ProductSensorList[i].productInfos[0] !== null){
												this.ProductSensorList[i].productType = this.ProductSensorList[i].productInfos[0].productTypeCode
										}
								}            
								this.total = response.total;
						}

						this.loading = false;
				}).catch((err) =>{
						this.$message({
								message: '传感器表格数据获取失败!',
								type: 'error'
						})
				})
				;
		},
		// 取消按钮
		cancel() {
		this.open = false;
		this.reset();
		},
		// 表单重置
		reset() {
		this.form = {
				id: null,
				sensorCode: null,
				sensorName: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				remark: null,
				removed: null
		};
		this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
		this.queryParams.pageNum = 1;
		this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
		this.resetForm("queryForm");
		this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
		this.ids = selection.map(item => item.id)
		this.single = selection.length!==1
		this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
		this.reset();
		this.open = true;
		this.getProductType()
		this.title = "添加产品传感器";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id || this.ids
			getProductSensor(id).then(response => {
					//获取产品类型下拉
					this.getProductType()
					this.form = response.data;
					if(response.data.productInfos.length > 0){
							this.form.productType = response.data?.productInfos[0].productTypeCode
							this.getProductInfoList(this.form.productType)
							let codeArr = []
							for(var i=0;i<response.data.productInfos.length;i++){
									codeArr.push(response.data.productInfos[i].productCode)
							}
							this.form.productCodes = codeArr
					}
					this.open = true;
					this.title = "修改产品传感器";
			});
		},
		/** 提交按钮 */
		submitForm() {
		this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.id != null) {
							const params = {
								id:this.form.id,
								productCodes:this.form.productCodes,
								sensorCode:this.form.sensorCode,
								sensorName:this.form.sensorName,
								remark:this.form.remark
							}
							updateProductSensor(params).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
					} else {
							addProductSensor(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
					}
				}
		});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$modal.confirm('是否确认删除产品传感器编号为"' + ids + '"的数据项？').then(function() {
				// 修改为逻辑删除
				return removedProductSensor(ids);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('produce/product-sensor/export', {
					...this.queryParams
			}, `product-sensor_${new Date().getTime()}.xlsx`)
		}
}
};
</script>
